<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="queryParams.startTime"
          type="datetime"
          placeholder="开始时间"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :picker-options="startDatePicker"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="queryParams.endTime"
          type="datetime"
          placeholder="结束时间"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :picker-options="endDatePicker"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    
    <el-table
        v-loading="loading"
        :data="dataList"
        @selection-change="handleSelectionChange"
        @sort-change='sortChange'
        row-key="id">
            <el-table-column type="selection"> </el-table-column>
            <el-table-column prop="targetValue" label="操作人"></el-table-column>
            <el-table-column prop="userAgent" label="Agent"></el-table-column>
            <el-table-column prop="origin" label="来源"></el-table-column>
            <el-table-column prop="remoteAddr" label="IP地址"></el-table-column>
            <el-table-column prop="loginStatus" label="登录状态"></el-table-column>
            <el-table-column prop="createTime" label="请求时间" sortable ></el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
  </div>
</template>

<script>
import { queryApiLog,queryLoginLog} from "@/api/system/log";
export default {
    name: "log",  
    data(){
        return{
            // 遮罩层
            loading:true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            dataList:[],
            total:0,
            // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                startTime: '',
                endTime:'',
                orderBy:'',
                sort:''
            },
            //弹出层标题
            title:"",
            //弹出层显示状态
            openDialog:false,
            //提交表单
            form:{},
            rules: {
               
            },
            startDatePicker: this.beginDate(),
            endDatePicker: this.processDate(),
        }
    },
    created() {
        this.getList();
    },
    methods:{

        sortChange(column, prop, order) {
            this.loading= true;
            this.queryParams.orderBy=column.prop;
            this.queryParams.sort=column.order;
            queryLoginLog(this.queryParams).then(res=>{
                if(res.code===0){
                    this.dataList = res.data;
                    this.total = res.page.total;
                }
                this.loading = false;
            }).catch(()=>{this.loading = false});
        },
        /** 查询列表 */
        getList(){
            this.loading= true;
            queryLoginLog(this.queryParams).then(res=>{
                if(res.code===0){
                    this.dataList = res.data;
                    this.total = res.page.total;
                }
                this.loading = false;
            }).catch(()=>{this.loading = false});
        },
        reset() {
            this.form = {
                id:""
            };
            this.resetForm("form");
        },
        /** 查询 */
        handleQuery(){
            this.getList();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        handleDelete(row){
            let dictIds = [];
            if (row.id) {
                dictIds.push(row.id);
            } else {
                dictIds = this.ids
            }
            this.$confirm('是否确认删除?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(()=>{
                deleteDesktopConfig({ids:dictIds}).then(res=>{
                    if(res.code===0){
                        this.msgSuccess("删除成功");
                        this.handleQuery();
                    }
                })
            });
        },
        beginDate(){
            return {
                disabledDate: time =>{
                if (this.endTime) {
                   return new Date(this.endTime).getTime()> time.getTime()
                    
                } else {
                    return time.getTime() > Date.now()
                }
                }
            }
        },
        processDate() {
            return {
                disabledDate: time =>{
                if (this.startTime) {
                    return new Date(this.startTime).getTime() < time.getTime()
                        
                } else {
                    return time.getTime() > Date.now()
                }
                }
            }
        }
    }
}
</script>